import { defineComponent } from 'vue';
import { Icon } from '@iconify/vue';

const Box = defineComponent(
  /**
   * @description: 统计盒子
   * @returns {JSX.Element}
   *
   * 1. 6个统计块
   * 2. 每个小块由图标、标题、数字组成
   * 3. 左边是正方形包裹图标，右边居中数字、数字下面是标题
   */

  props => {
    return () => (
      <div class="w-1/6 aspect-ratio-5/2 flex flex-row justify-center items-center bg-white shadow-md rounded-md">
        <div class="h-full aspect-ratio-1/1 flex-cc rounded-md" style={`background-color: ${props.color} `}>
          <Icon icon={props.icon} width="50%" height="50%" class="color-#fbfbfb" />
        </div>
        <div class="flex-1 flex-cc flex-col">
          <div class="text-2.5vw text-gray-500 font-semibold line-height-120%">{props.count}</div>
          <div class="text-0.8vw font-bold text-#333">{props.title}</div>
        </div>
      </div>
    );
  },
  {
    props: {
      color: {
        type: String,
        default: 'rgb(229 231 235)'
      },
      title: {
        type: String,
        default: '标题'
      },
      count: {
        type: Number,
        default: 0
      },
      icon: {
        type: String,
        default: 'ant-design:bar-chart-outlined'
      }
    }
  }
);

export default Box;
